<template>
    <div class="pro-detail content">
        <el-card class="box-card">
            <div slot="header" class="card-header">
                <span>项目详情</span>
                <div class="status"><span></span>{{ rederRate }}</div>
            </div>
            <div>
                <el-row>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">项目ID</span>
                            <span class="text">{{ baseinfo.id }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">项目名称</span>
                            <span class="text">{{ baseinfo.projectName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">当前使用模型</span>
                            <span class="text">{{ baseinfo.projectName }}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">项目描述</span>
                            <span class="text">{{ baseinfo.projectDesc }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">创建人</span>
                            <span class="text">{{ baseinfo.creater }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">创建时间</span>
                            <span class="text">{{ baseinfo.createTime }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>数据集信息</span>
            </div>
            <div>
                <el-row>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">数据集ID</span>
                            <span class="text">{{ data.id }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">数据集名称</span>
                            <span class="text">{{ data.fileName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">创建时间</span>
                            <span class="text">{{ data.createTime }}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <!-- <div class="label-text">
                            <span class="label">标签情况</span> -->
                        <!-- <span class="text" v-html="renderDetail()"></span> -->
                        <!-- </div> -->
                    </el-col>
                    <!-- <el-col></el-col>
                    <el-col></el-col> -->
                </el-row>
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>模型详情</span>
            </div>
            <div>
                <el-row>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">模型ID</span>
                            <span class="text">{{ model.id }}</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">模型名称</span>
                            <span class="text">
                                {{ model.modelName }}
                                <el-button
                                    @click="exportModel"
                                    size="mini"
                                    style="margin-left:5px"
                                    >导出</el-button
                                >
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">模型状态</span>
                            <span class="text">
                                {{ renderStatus }}
                                <el-button
                                    v-if="
                                        model.status == 'published' &&
                                            publishTask
                                    "
                                    @click="publishOut"
                                    size="mini"
                                    style="margin-left:5px"
                                    >下线模型</el-button
                                >
                            </span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">模型评估结果</span>
                            <span class="text">
                                <el-button type="text" @click="goToEdit"
                                    >查看详情</el-button
                                >
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="label-text">
                            <span class="label">创建时间</span>
                            <span class="text">
                                {{ model.createTime }}
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="8"> </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>
<script>
import request from "@/modules/index/utils/request";
import { downloadFile, progressRate } from "@/utils/common";
import _ from "lodash";
const rate = progressRate;
export default {
    name: "proDetail",
    data() {
        return {
            loading: false,
            id: "",
            baseinfo: {},
            data: {},
            model: {},
            task: {},
            publishTask: {}
        };
    },
    created: function() {
        let query = this.$router.currentRoute.query;
        if (!query.id) {
            return;
        }
        this.id = query.id;
        this.loadData();
    },
    methods: {
        async loadData() {
            let baseinfo = null;
            try {
                baseinfo = await this.loadPro();
            } catch (err) {
                baseinfo = null;
            }
            this.baseinfo = baseinfo;
            let data = null;
            try {
                data = await this.loadMaterial();
            } catch (err) {
                data = null;
            }
            this.data = data;
            let task = null;
            try {
                task = await this.loadTask();
            } catch (err) {
                task = null;
            }
            this.task = task;
            let model = null;
            try {
                model = await this.loadModel();
            } catch (err) {
                model = null;
            }
            this.model = model;

            let publishTask = null;
            try {
                publishTask = await this.loadPublishTask();
            } catch (err) {
                publishTask = null;
            }
            this.publishTask = publishTask;
        },
        loadPro() {
            let id = this.id;
            return new Promise((resolve, reject) => {
                request({
                    url: `/project/${id}`, //接口
                    method: "get"
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }
                            reject(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        loadMaterial() {
            let data = {
                projectId: this.id
            };
            return new Promise((resolve, reject) => {
                request({
                    url: "/material-info/findByProjectId", //接口
                    method: "post",
                    params: data
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }
                            reject("没有数据");
                        } else {
                            this.$message.error("获取失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        loadTask() {
            let data = {
                projectId: this.id
            };
            return new Promise((resolve, reject) => {
                request({
                    url: "/traininginfo/training-info/getByProjectId", //接口
                    method: "get",
                    params: data
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }

                            resolve(null);
                        } else {
                            this.$message.error("获取失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        loadModel(task) {
            let taskId = this.task.id;
            if (!taskId) {
                return;
            }
            return new Promise((resolve, reject) => {
                request({
                    url: `/training-model-data/find-by-training-task/${taskId}`, //接口
                    method: "get"
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }

                            resolve(null);
                        } else {
                            this.$message.error("获取失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        loadPublishTask() {
            let modelId = this.model.id;
            if (!modelId) {
                return;
            }
            return new Promise((resolve, reject) => {
                request({
                    url: `/publishtask/publish-task-data/find-by-model/${modelId}`, //接口
                    method: "get"
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }

                            resolve(null);
                        } else {
                            this.$message.error("获取失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        goToEdit() {
            this.$router.push({
                name: "proEdit",
                params: { data: this.baseinfo, isToModelResult: true }
            });
        },
        exportModel() {
            let id = this.model.id;
            request({
                url: `/training-model-data/model-data-sdk-list/${id}`, //接口
                method: "get",
                responseType: "blob"
            })
                .then(response => {
                    if (!response.data) {
                        this.$message.error("下载文件失败");
                        return;
                    }
                    downloadFile(response);
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },
        publishOut() {
            let publishTaskId = this.publishTask.id;
            if (!publishTaskId) {
                return;
            }
            request({
                url: `/publishtask/publish-task-data/${publishTaskId}/stop`, //接口
                method: "post"
            })
                .then(res => {
                    if (res.data.success) {
                        this.$message.success(res.data.msg);
                        this.loadData();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        }
    },
    computed: {
        rederRate: function() {
            let rateText = this.baseinfo.progressRate;

            return _.find(rate, { value: rateText })
                ? _.find(rate, { value: rateText }).text
                : "";
        },
        renderStatus() {
            let result = "",
                status = this.model.status;
            if (status === "unpublish") {
                result = "未发布";
            }
            if (status === "published") {
                result = "已发布";
            }
            return result;
        }
    }
};
</script>
<style lang="scss" scoped>
.box-card {
    margin-bottom: 10px;
    &:last-of-type {
        margin-bottom: 10px;
    }
    & > div {
        padding: 5px;
    }
}
.card-header {
    display: inline-block;
    & > div {
        display: inline-block;
    }
    .status {
        font-size: 13px;
        margin-left: 5px;
        position: relative;
        & > span {
            position: relative;
            display: inline-block;
            border-radius: 50%;
            width: 12px;
            height: 12px;
        }
    }
}

.label-text {
    font-size: 13px;
    & > .label {
        display: inline-block;
        position: relative;
        &:after {
            position: relative;
            content: ":";
            margin: 0px 10px;
        }
    }
    & > .text {
        display: inline-block;
        position: relative;
    }
}
.el-row {
    margin-bottom: 15px;
}
</style>
